<template>
  <div class="personal" >
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <div class="col-md-3 personal-left">
      <div class="side-nav">
        <ul class="list-group">
          <li v-for="(item, index) in sideNavMenu" @click="sideNavMenuActiveIndex = index" 
              :class="{'list-group-item': true, 'active': (index == sideNavMenuActiveIndex)}">
            <a href="javascript:void(0)">{{item}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-9 side-nav-content">
      <div id="side-nav-content">
        <div v-show="sideNavMenuActiveIndex == 0">
          <!-- 这部分是文章列表 -->
          <div class="nothing" v-show="!userArticles.length">无</div>
          <ul class="side-nav-article-list">
            <li v-for="item in userArticles">
              <h4 :class="{'link-better-icon': item.better, 'clearfix': true}" >
                <router-link :to="'/article/'+item._id" :class="{'better-icon': item.better}" >{{item.title}} </router-link>
                <!-- <button v-show="!item.better" class="apply-add-better pull-right">申请加精</button> -->
              </h4>
              <p class="article-content">
                摘要: {{item.intro}}
              </p>
              <div class="item-footer clearfix">
                <div class="inner pull-right">
                  <span>posted</span>
                  <span>@ {{item.time | date}}</span>
                  <span>阅读量({{item.read}})</span>
                  <span>评论({{item.comment.length}}) </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div v-show="sideNavMenuActiveIndex == 1" class="apply-better-article col-md-8 col-md-offset-2">
          <!-- 这部分是文章加精申请 -->
          <form class="apply-area form-horizontal text-center">
            <div class="form-group ">
              <label>选择要申请精品的文章</label>
              <select  class="form-control" v-model="applyBetterArticleItem">
                <option value="-1" class="select-title">请选择文章</option>
                <option v-for="(item, index) in userArticles" :value="index" v-show="!item.better">
                  {{item.title}}
                </option>
              </select>
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block" @click.prevent="applyBetter">申请</button>
            </div>
          </form>

          <h4 ><span class="glyphicon glyphicon-list"></span> 申请规则</h4>
          <div class="">
            <ul class="add-better-rules">
              <li> 
                <span class="glyphicon glyphicon-chevron-right"></span> 
                <span>文章内容应为积极向上、富有教育意义的。</span>
              </li>
              <li> 
                <span class="glyphicon glyphicon-chevron-right"></span> 
                <span>技术类文章应为原创，引用他人文章不予加精。</span>
              </li>
              <li> 
                <span class="glyphicon glyphicon-chevron-right"></span> 
                <span>文章应当是超过1000字的，篇幅较短的文章不予加精。</span>
              </li>
              <li> 
                <span class="glyphicon glyphicon-chevron-right"></span> 
                <span>文章应当有个人观点，并且主观明确。</span>
              </li>
              <li> 
                <span class="glyphicon glyphicon-chevron-right"></span> 
                <span>一切负能量、对社会负面影响的文章不予加精。</span>
              </li>
            </ul>
          </div>
        </div>
        <div v-show="sideNavMenuActiveIndex == 2">
          <div v-show="!userCare.length" class="nothing">
            你没有关注任何人
          </div>
          <div class="col-md-4" v-for="(item, index) in userCare">
            <div class="panel panel-primary user-panel">
              <div class="panel-heading clearfix">
                <h3 class="panel-title pull-left">{{item.user}} </h3>
                <p class="pull-right">积分 {{item.integral}} </p>
              </div>
              <div class="panel-body">
                <p class="userInfo-intro">简介：{{item.intro}}</p>
              </div>
              <div class="panel-footer clearfix">
                <router-link tag='button' :to="'/userCenter/'+item._id" class="btn btn-sm btn-primary pull-left">
                  查看信息
                </router-link>
                <button class="btn btn-sm btn-default pull-right" @click="cancelCare(index)">
                  <span class="glyphicon glyphicon-remove"></span>取消关注
                </button>
              </div>
            </div>
          </div>
        </div>
        <div v-show="sideNavMenuActiveIndex == 3">
          <div v-show="!userFans.length" class="nothing">
            没有任何人关注你
          </div>
          <div class="col-md-4" v-for="(item, index) in userFans">
            <div class="panel panel-primary user-panel">
              <div class="panel-heading clearfix">
                <h3 class="panel-title pull-left">{{item.user}} </h3>
                <p class="pull-right">积分 {{item.integral}} </p>
              </div>
              <div class="panel-body">
                <p class="userInfo-intro">简介：{{item.intro}}</p>
              </div>
              <div class="panel-footer clearfix">
                <router-link tag="button" :to="'/userCenter/'+ item._id" class="btn btn-sm btn-primary pull-left">
                  查看信息
                </router-link>
                <button class="btn btn-sm btn-default pull-right" @click="careUser(index)">
                  <span class="glyphicon glyphicon-plus"></span>关注他
                </button>
              </div>
            </div>
          </div>
        </div>
        <div v-show="sideNavMenuActiveIndex == 4" class="user-info-area">
          <div class="panel panel-default" v-show="!safeInfoStatus.update">
            <div class="panel-heading">
              <h3 class="text-center panel-title">个人信息</h3>
            </div>
            <div class="panel-body user-info-box">
              <div class="col-md-8">
                <div class="base-info">
                  <!--这里是基础信息-->
                  <h4><span class="glyphicon glyphicon-bookmark"></span> 基本资料</h4>
                    <div  class="user-info-item">
                      <strong>用户名：</strong>
                      <span>{{userInfo.user}}</span>
                    </div>
                    <div class="user-info-item">
                      <strong>简　介：</strong>
                      <span v-show="!baseInfoStatus.update.intro">{{userInfo.intro}}</span>
                      <span v-show="baseInfoStatus.update.intro">
                        <input  class="user-info-intro" type="text"  v-model="userInfo.intro">
                        <button class="btn btn-default base-info-handle-btn" @click="updateIntro()">
                          <span class="glyphicon glyphicon-ok"></span>
                        </button>
                      </span>
                      
                      <span
                         @click="baseInfoStatus.update.intro = true" class="glyphicon glyphicon-pencil pull-right" title="修改">
                      </span>
                    </div>
                    <div class="user-info-item">

                    </div>
                </div>
                <div class="safe-info">
                  <!-- 这里是安全 -->
                  <h4><span class="glyphicon glyphicon-bookmark"></span> 安全中心 </h4>
                  <!-- <div class="user-info-item">
                    <strong>绑定邮箱：</strong>
                    <span>{{userInfo.email}} </span>
                    <span class="glyphicon glyphicon-pencil pull-right" title="修改" @click="safeinfoupdate(false)"></span>
                  </div> -->
                  <div class="user-info-item">
                    <strong>当前密码：</strong>
                    <span>******</span>
                    <span class="glyphicon glyphicon-pencil pull-right" title="修改" @click="safeinfoupdate(true)"></span>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-md-offset-1">
                <ul>
                  <li><strong>博龄：</strong>{{userInfo.blogAge}} 天 </li>
                  <li><strong>积分：</strong>{{userInfo.integral}}</li>
                  <li><strong>关注：</strong>{{userCare.length}} </li>
                  <li><strong>粉丝：</strong>{{userFans.length}} </li>
                </ul>
              </div>
            </div>
          </div>
          <div v-show="safeInfoStatus.update" class="safe-info-update-area">
            <!-- v-show="safeInfoStatus.isPassword" -->
            <div class="panel panel-default" >
              <ol class="breadcrumb">
                <li><a href="#" @click.prevent="safeInfoStatus.update = false">个人设置</a></li>
                <li>修改密码</li>
              </ol>
              <!--这个是修改密码的面板-->
              <div class="panel-heading">
                <h3 class="panel-title text-center">修改密码</h3>
              </div>
              <div class="panel-body">
                <form action="#" class="form-horizontal">
                  <div class="form-group">
                    <label for="" class="col-md-2 label-control">当前密码</label>
                    <div class="col-md-10">
                      <input type="password" class="form-control" v-model="safeInfoStatus.password.oldPassword" placeholder="输入当前密码">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-md-2 label-control">新 密 码</label>
                    <div class="col-md-10">
                      <input type="password" class="form-control" v-model="safeInfoStatus.password.newPassword" placeholder="输入新密码">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-md-2 label-control">确认密码</label>
                    <div class="col-md-10">
                      <input type="password" class="form-control" v-model="safeInfoStatus.password.confirmPassword" placeholder="再次输入新密码">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                      <button class="btn btn-info" @click.prevent="updatePassword">提交</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <!-- <div class="panel panel-default" v-show="!safeInfoStatus.isPassword">
              <ol class="breadcrumb">
                <li><a href="#" @click.prevent="safeInfoStatus.update = false">个人设置</a></li>
                <li>QQ邮箱改绑</li>
              </ol>
              这里是修改绑定QQ邮箱面板
              <div class="panel-heading text-center">
                <h3 class="panel-title">QQ邮箱改绑</h3>
              </div>
              <div class="panel-body">
                <form action="#" class="form-horizontal">
                  <fieldset v-show="!safeInfoStatus.email.isPass">
                    <div class="form-group">
                      <div class="col-md-6 col-md-offset-3">
                        <input type="text" placeholder="请输入密码" class="form-control">
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-md-2 col-md-offset-5">
                        <button class="btn btn-default btn-block" @click.prevent="checkPassword">确定</button>
                      </div>
                    </div>
                  </fieldset>
                  <fieldset v-show="safeInfoStatus.email.isPass">
                    <div class="form-group">
                      <label for="" class="label-control col-md-2">email</label>
                      <div class="col-md-10">
                        <input type="text" placeholder="请输入新邮箱" class="form-control" v-model="safeInfoStatus.email.newEmail">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="" class="col-md-2 label-control">验证码</label>
                      <div class="col-md-5">
                        <input type="text" class="form-control" placeholder="请输入验证码" v-model="safeInfoStatus.email.authCode">
                      </div>
                      <div class="col-md-4 col-md-offset-1">
                        <button class="btn btn-block" @click.prevent="getAuthCode">获取验证码</button>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-md-10 col-md-offset-2">
                        <button class="btn btn-primary" @click.prevent="updateEmail">确认修改</button>
                      </div>
                    </div>
                  </fieldset>
                </form>
              </div>
            </div>
                      </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .personal-left.col-md-3 {
    padding: 0;
  }
  .info-card {
    border: 1px solid #ccc;
    padding-bottom: 10px;
  }
  .info-card h3 {
    text-align: center;
    color: #000;
    padding: 6px 0;
    font-size: 16px;
    background: #eee;

  }
  .info-card-item {
    margin: 8px 0 0 10px;
  }

  .side-nav li:first-of-type, .side-nav li:last-of-type {
    border-radius: 0;
  }
  .side-nav .list-group li a {
    display: block;
  }
  .side-nav .list-group li.active a {
    color: #fff;
  }

  .side-nav-content {
    height: 480px;
    padding-left: 20px;
  }
  
  .side-nav-article-list {
    -border-bottom: 1px solid #77AACC;
  }
  .side-nav-article-list li {
    margin:0 0 8px 0;
    padding: 10px;
    -border: 1px solid #ddd;
    box-shadow: 1px 1px 2px #aaa;
  }
  ul.side-nav-article-list h4 {
    height: 20px;
    line-height: 20px;
    color: #333;
    font-weight: 600;
   - border-bottom: 1px solid #999;
  }
  .side-nav-article-list .article-content {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #555;
  }
  .side-nav-article-list .item-footer {
    margin-top: 8px;
    color: #666;
  }
  
  .link-better-icon {
    background: url(../assets/better.png) no-repeat right center;
  }

  button.apply-add-better {
    border: none;
    outline: none;
    background: #fff;
    text-shadow: 0px 0px 1px 1px #000;
  }
  
  /*文章加精*/
  .apply-better-article form {
    margin-top: 0;
  }
  .apply-better-article .add-better-rules{
    color: #999;
  }
  .apply-better-article h4 {
    padding-left: 4px;
    color: #666;
  }
  .apply-better-article .apply-area select{
    margin: 10px 0;
  }
  .add-better-rules li{
    margin-top: 10px;
  }
  .panel-footer .btn-default {
    margin-left: 5px;
  }

  .nothing {
    text-align: center;
    color: #999;
    font-size: 28px;
  }
  .user-info-area .panel {
    border: none;
  }
  .user-info-area .panel .panel-heading {
    -background: #fff;
  }
  .user-info-item {
    margin: 10px 0;
    padding-left: 20px;
    clear: both;
  }
  .user-info-area .base-info, .user-info-area .safe-info {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  .safe-info-update-btn {
    background: #fff;
    border-style: solid;
  }
  .user-info-area form {
    margin-top: 0;
  }
  .userInfo-intro {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ol.breadcrumb {
    background: #fff;
  }
  .user-info-box .glyphicon-pencil {
    background: #333;
    color: #fff;
    cursor: pointer;
  }
  .base-info .base-info-handle-btn {
    padding: 0px 4px;
  }

  
</style>

<script>
  export default {
    data () {
      return {
        applyBetterArticleItem: '0',
        rules: {
          password: {
            patt: /^([\w]){6,16}$/
          },
         /* email: {
            patt: /^([\d]){6,12}@qq\.com$/
          }*/
        },
        baseInfoStatus: {
          update: {
            intro: false
          }
        },
        safeInfoStatus: {
          update: false,
          //isPassword: false,
          password: {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          },
          /*email: {
            isPass: false,
            password: '',
            newEmail: '',
            authCode: ''
          }*/
        },
        sideNavMenu: ['文章列表', '文章加精', '我的关注', '我的粉丝', '个人设置'],
        sideNavMenuActiveIndex: 0,
        userInfo: {},
        userArticles: [],
        userCare: [],
        userFans: [],
        settings: {age: false, intro: false}
      }
    },
    watch: {
      '$route': function () {
        this.iinit()
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      //  初始化数据
      init () {
        var id = this.$route.params.id
        this.$http.get(this.rootPath + '/user?userId=' + id).then((res) => {
          var oRes = res.data
          this.userArticles = oRes.userArticles
          this.userInfo = oRes.userInfo
          this.userFans = oRes.userFans
          this.userCare = oRes.userCare
        })
      },
      //  更新用户基础信息
      updateIntro () {
        this.$http.post(this.rootPath + '/updateUser/intro', {userId: this.userInfo._id, newIntro: this.userInfo.intro}).then((res) => {
          if (res.data === '1') {
            this.baseInfoStatus.update.intro = false
            window.alert('ok')
          }
        })
      },
      //  安全信息视图切换
      safeinfoupdate (isPassword) {
        this.safeInfoStatus.update = true
        this.safeInfoStatus.isPassword = isPassword
      },
      //  精品文章申请
      applyBetter () {
        if (this.applyBetterArticleItem === '-1') {
          return window.alert('别闹')
        }
        var art = this.userArticles[this.applyBetterArticleItem]
        var obj = {
          articleId: art._id,
          articleTitle: art.title,
          articleAutor: art.autor
        }
        this.$http.post(this.rootPath + '/applyBetter', obj).then((res) => {
          if (res.data === '1') {
            window.alert('申请成功！')
          }
        })
      },
      //  取消关注
      cancelCare (index) {
        var target = this.userCare[index]
        this.$http.post(this.rootPath + '/updateUser/cancelCare', {handlerId: this.userInfo._id, targeterId: target._id}).then((res) => {
          if (res.data === '1') {
            this.userCare.splice(index, 1)
            window.alert('取消成功')
          }
        })
      },
      //  关注他人
      careUser (index) {
        var target = this.userFans[index]
        if (target._id === this.userInfo._id) {
          return window.alert('别闹')
        }
        this.$http.post(this.rootPath + '/updateUser/care', {handlerId: this.userInfo._id, targeterId: target._id}).then((res) => {
          if (res.data === '1') {
            this.userCare.push(target)
            window.alert('关注成功')
          } else if (res.data === '0') {
            window.alert('已经关注了')
          }
        })
      },
      //  验证密码
      checkPassword () {
        var password = this.safeInfoStatus.email.password
        if (!this.rules.password.patt.test(password)) {
          return window.alert('密码不合法')
        }
        this.$http.post(this.rootPath + '/checkPassword', {password: password}).then((res) => {
          if (res.data === '1') {
            this.safeInfoStatus.email.isPass = true
          }
        })
      },
      //  获取验证码
      getAuthCode () {
        var obj = this.safeInfoStatus.email
        if (!this.rules.email.patt.test(obj.newEmail)) {
          return window.alert('邮箱格式不对')
        }
        this.$http.get(this.rootPath + '/authCode?email=' + obj.newEmail).then((res) => {
          if (res.data === '1') {
            window.alert('获取成功')
          }
        })
      },
      //  更新邮箱
      updateEmail () {
        var obj = this.safeInfoStatus.email
        this.$http.post(this.rootPath + '/updateUser/email', {userId: this.userInfo._id, newEmail: obj.newEmail, authCode: obj.authCode}).then((res) => {
          if (res.data === '1') {
            this.userInfo.email = obj.newEmail
            this.safeInfoStatus.update = false
            window.alert('绑定成功')
          }
        })
      },
      //  修改密码
      updatePassword () {
        var obj = this.safeInfoStatus.password
        var patt = this.rules.password.patt
        if (!patt.test(obj.newPassword)) {
          return window.alert('新密码不合法')
        }
        if (obj.newPassword !== obj.confirmPassword) {
          return window.alert('两次输入密码不一致')
        }
        obj.userId = this.userInfo._id
        this.$http.post(this.rootPath + '/updateUser/password', obj).then((res) => {
          if (res.data === '1') {
            this.safeInfoStatus.update = false
            window.alert('修改成功')
          } else if (res.data === '0') {
            window.alert('当前密码不正确')
          }
        })
      }
    },
    props: ['rootPath']
  }
</script>